<template>
  <div>
    <div style="width: 430px; float: right">
      <el-input v-model="queryParam.name" placeholder="请输入图书名称" @keyup.enter.native='advanceConfirm'>
        <i class="el-input__icon el-icon-search" slot="prefix"></i>
        <el-button :icon="showAdvance ? 'el-icon-caret-bottom' : 'el-icon-caret-top'" slot="append" v-on:click="showAdvance = !showAdvance"></el-button>
      </el-input>
    </div>
    <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
      <div class="block"style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">图书分类</div>
          <el-cascader v-model="queryParam.category"
            :options="bookSubTagList"
            filterable
            :props="{label: 'name', value: 'id', checkStrictly: true }"
            clearable size="small" style="width: 300px;"></el-cascader>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">更新时间</div>
        <div class="block" style="display: inline-block;">
          <el-date-picker
            v-model="queryParam.importTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format=" yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
            size="small" style="width: 300px;">
          </el-date-picker>
        </div>
      </div>
      <div class="block"style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">ISBN号</div>
        <div style="display: inline-block">
        <el-input v-model="queryParam.isbn" size="small" style="width: 300px;"></el-input>
        </div>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">图书类型</div>
        <el-select
          v-model="queryParam.bookType"
          clearable
          placeholder="请选择图书类型"
          size="small" style="width: 300px">
          <el-option
            v-for="item in CONST.BOOK_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">导入状态</div>
        <el-select
          v-model="queryParam.status"
          clearable
          placeholder="请选择状态"
          size="small" style="width: 300px">
          <el-option label="导入失败" value="2"></el-option>
          <el-option label="导入成功" value="0"></el-option>
        </el-select>
      </div>
      <div style="margin-top: 60px; right: 10px;">
        <el-row>
          <el-col :offset="6" :span="6">
            <div style="margin-left: 90px;height: 32px; width: 88px;">
              <el-button size="small" v-on:click="showAdvance = false">取 消</el-button>
            </div>
          </el-col>
          <el-col :offset="2" :span="2">
            <div style="margin-left: 30px;height: 32px; width: 88px;">
              <el-button size="small" v-on:click="reset">重置</el-button>
            </div>
          </el-col>
          <el-col :offset="2" :span="2">
            <div div style="margin-left: 30px;height: 32px; width: 88px;">
              <el-button size="small" type="success" v-on:click="advanceConfirm" >确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DraftSearch",
    props: ['bookSubTagList'],
    data() {
      return {
        showAdvance: false,
        queryParam: {
          currentPage: 1,
          pageSize: 10,
        },
        version:''
      }
    },
    methods: {
      reset: function () {
        this.queryParam = {
          currentPage: 1,
          pageSize: 10,
        }
      },
      advanceConfirm: function () {
        this.showAdvance = false;
        this.$emit('advanceConfirm', this.queryParam)
      },
    }
  }
</script>

<style scoped>

</style>
